import DatGui, { DatNumber, DatSelect } from "react-dat-gui";
import GpuCanvas from "../../components/GpuCanvas";
import { useState } from "react";

export default function GameOfLifeSample() {
  const appName = "GameOfLife";
  const [gameOptions, setGameOptions] = useState({
    width: 128,
    height: 128,
    timestep: 4,
    workgroupSize: 8,
  });
  const onUpdate = (data: any) => {
    setGameOptions(data);
  };
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        position: "relative",
      }}
    >
      <GpuCanvas app={appName} data={gameOptions} />
      <DatGui data={gameOptions} onUpdate={onUpdate}>
        <DatNumber path="timestep" label="timestep" min={1} max={60} step={1} />
        <DatNumber path="width" label="width" min={16} max={1024} step={16} />
        <DatNumber path="height" label="height" min={16} max={1024} step={16} />
        <DatSelect
          path="workgroupSize"
          label="workgroupSize"
          options={[4, 8, 16]}
        />
      </DatGui>
    </div>
  );
}
